<template>
  <div class="big">
    <van-nav-bar  left-arrow @click-left="onleft">
</van-nav-bar>

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in img" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>
<div class="mongy"><span class="price" style="color: red; font-size: 24px; margin-left: 10px;">{{ money }}</span><span class="befor" style="text-decoration: line-through; font-size: 12px; color: gray;">{{ befor }}</span></div>
<p style="margin-top: 20px; font-size: 18px; margin-left: 10px;">{{ name }}</p>
<div style="padding: 10px 0px 10px 0px; margin-top: 10px; background-color: white;">
    <p>&emsp;规则 &emsp; 订单超过60分钟未支付系统自动关闭。 ></p>
    
</div>
<div style="padding: 10px 0px 10px 0px; margin-top: 10px; background-color: white;">
    <p>&emsp;分期 &emsp; 花呗分期  &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; <span style="color: red;">分期优惠</span>&emsp; >  </p>

</div>
<div style="padding: 10px 0px 10px 0px; margin-top: 10px; background-color: white;">
    <p>&emsp;已选 &emsp;【热销】{{ name1 }} ></p>

</div>
<div style="padding: 10px 0px 10px 0px; margin-top: 10px; background-color: white;">
    <p>&emsp;运费  &emsp;  满10元包邮（请提交订单时为准）</p>

</div>


<van-goods-action :safe-area-inset-bottom="true">
  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-goods-action-icon icon="cart-o" text="购物车" />
  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
  <van-goods-action-button type="warning" text="加入购物车" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>

  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';
Vue.use(NavBar);


import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);


import { Lazyload } from 'vant';

Vue.use(Lazyload);

import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
    data(){
        return{
            arr:"",
            img:[],
            money:"",
            befor:"",
            name:"",
            name1:""

        }
    },
    methods:{
        onleft(){
            this.$router.push('/homepage').catch(err=>{})
        }
    },
    mounted(){
            this.$http({
                url:"http://localhost:3000/selected",
                method:"get",
            }).then(res=>{
                console.log(this.$route.query.id);
                console.log(res.data[0].data.data1[this.$route.query.id].h1);
                // this.arr=res.data[0].data.data1
                this.img.push(res.data[0].data.data1[this.$route.query.id].img1)
                this.img.push(res.data[0].data.data1[this.$route.query.id].img2)
                this.img.push(res.data[0].data.data1[this.$route.query.id].img3)
                this.img.push(res.data[0].data.data1[this.$route.query.id].img4)
                this.img.push(res.data[0].data.data1[this.$route.query.id].img5)
                this.money=(res.data[0].data.data1[this.$route.query.id].price)
                this.befor=(res.data[0].data.data1[this.$route.query.id].priceold)
                this.name=(res.data[0].data.data1[this.$route.query.id].neirong)
                this.name1=(res.data[0].data.data1[this.$route.query.id].h1)
            })
          
    }


}
</script>

<style scoped>
.big{
    height: 1000px;
}
 .van-swipe-item img {
    width: 100%;
 }
</style>